﻿<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" isELIgnored="false" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<!-- 包含公共的JSP代码片段 -->
	<%
		String path = request.getRequestURI();
		String basePath = request.getScheme() + "://"
				+ request.getServerName() + ":" + request.getServerPort()
				+ path;
	%>
	<base href="<%=basePath%>">
	
<title>无线点餐平台</title>



<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="style/js/jquery.js"></script>
<script type="text/javascript" src="style/js/page_common.js"></script>
<%--<link href="style/css/common_style_blue.css" rel="stylesheet" type="text/css">--%>
<link rel="stylesheet" type="text/css" href="style/css/index_1.css" />
	<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script>
		//图片预览
		function getFullPath(obj){
			if (obj){
				//ie
				if (window.navigator.userAgent.indexOf("MSIE") >= 1){
					obj.select();
					return document.selection.createRange().text;
				}else if (window.navigator.userAgent.indexOf("Firefox") >= 1){
					//firefox　
					return window.URL.createObjectURL(obj.files.item(0));
				}else if(navigator.userAgent.indexOf("Chrome")>0){
					//chrome
					return window.URL.createObjectURL(obj.files.item(0));
				}
				return obj.value;
			}
		}
		$(function(){
			$("#pic").change(function(){
				var path = getFullPath($(this)[0]);
				console.log(path);
				$("#imgPic").prop("src",path);
			});
		});
	</script>
	<style type="">
		.select{
			display: inline-block;
			width: 150px;
			height: 35px;

		}
		.topnav{
			width: 96%;
			height: 50px;
			margin: 0 auto;

			border-bottom: 1px solid gainsboro;
		}
		.topnav span{
			position: relative;
			font-size: 16px;
			left: 0;
			top: 15px;
			color: grey;
		}
		.topnav spam{
			color: black;
		}
		.ItemBlockBorder{
			width: 100%;
		}
		.ItemBlock{
			width: 96%;
			margin: 0 auto;
		}
		.ItemBlock_Title{
			width: 96%;
			height: 50px;
			margin: 0 auto;

			border-bottom: 1px solid gainsboro;
		}
		.ItemBlock_Title span{
			display: inline-block;
			width: 120px;
			height: 45px;
			line-height: 45px;
			text-align: center;
			font-size: 16px;
			color: #009688;
			border-bottom: #009688 solid 2px;
		}
		tr{
			width: 100%;
			height: 50px;
		}
		tr td:first-child{


		}
		td input{
			width: 100%;
		}
		.tobody{
			width: 100%;
			height: 35px;
			line-height: 35px;
			margin-bottom: 25px;
			margin-top: 20px;
		}
		.tobody span:first-child{
			display: inline-block;
			border: grey 1px solid;
			background-color: #FBFBFB;
			text-align: center;
			width: 100px;
			height: 35px;
		}
		.tobody span:nth-child(2){
			display: inline-block;
			width: 85%;
			height: 35px;
			position: relative;
			left: -5px;
			top: -1px;
			border-left: 0;
		}
		.tobody input{
			display: inline-block;
			width: 90%;
			height: 35px;
		}
		.TextareaStyle{
			display: inline-block;
			width: 90%;
			height: 35px;
			position: relative;
			top: 13px;
		}
		#imgPic{
			width: 250px;
			height: 200px;
		}
		#InputDetailBar{
			position: relative;
			top: 200px;
			left: 43%;
		}
		.FunctionButtonInput{
			width: 60px;
			height: 35px;
			background-color: #009688;
			border: 0;
			color: white;
			margin-right: 20px;
		}
		.FunctionButton{
			display: inline-block;
			width: 60px;
			height: 35px;
			background-color: #009688;
			border: 0;
			color: white;
			line-height: 35px;
			text-align: center;
			position: relative;
			top: -1px;
		}
		.FunctionButton:hover{
			text-decoration: none;
			color: white;
		}
		body{
			overflow-x: hidden;
		}

	</style>
</head>
<body>

<!-- 页面标题 -->
<div id="TitleArea">
	<div class="topnav">
		<span>系统设置— 管理员设置— <spam>权限列表</spam></span>
	</div>
<!-- 主内容区域（数据列表或表单显示） -->
<div id="MainArea">
	<!-- 表单内容 -->
	<form action="/foods.let?type=addFood" method="post" enctype="multipart/form-data">
		<!-- 本段标题（分段标题） -->
		<div class="ItemBlock_Title">
        	<span>菜品信息</span>
        </div>
		<!-- 本段表单字段 -->
        <div class="ItemBlockBorder">
			<div class="ItemBlock">
				<div class="ItemBlock2">
					<div class="tobody">
						<span>商品</span>
						<span>
							<select name="cid" class="select">
									<option value="0" selected>---请选择---</option>
									<c:forEach var="t" items="${types}">
										<option value="${t.id}" >${t.name}</option>
									</c:forEach>
								</select>
						</span>
					</div>
					<div class="tobody">
						<span >菜名</span>
						<span><input type="text" name="foodName" class="InputStyle" value=""/> *</span>
					</div>
					<div class="tobody">
						<span>价格</span>
						<span><input type="text" name="price" class="InputStyle" value=""/> *</span>
					</div>
					<div class="tobody">
						<span>简介</span>
						<span><textarea name="describe" class="TextareaStyle"></textarea></span>
					</div>
					<div class="tobody">
						<span>图片</span>
						<input type="file" id="pic" name="pic" >
						<p></p>

						<span>
							<fieldset>
								<img id="imgPic" src="#" />
							</fieldset>
						</span>
					</div>
				</div>
			</div>
        </div>
		
		
		<!-- 表单操作 -->
		<div id="InputDetailBar">
			<input type="submit" value="添加" class="FunctionButtonInput">
            <a href="javascript:history.go(-1);" class="FunctionButton">返回</a>
        </div>
	</form>
</div>
</body>
</html>
